$(function () {
    $(function () {
        $(".header").load("./header.html", function () {
           
        })
        $(".footer").load("./bottom.html", function () {
        })
    })
    $.ajax({
        url: "./api/details",
        type: "get",
        dataType: "json"
    }).done((res) => {

        var strhtml = "";
        res.forEach(el => {
            strhtml += `
            <li><a href="./details.html?=${el.p_id}"><img src="${el.p_img_index}" alt=""></a></li>
            `
            $(".line7box").html(strhtml)
        })
    })


    //延迟加载
    $("img").lazyload({
        // placeholder: "images/loading.gif", //用图片提前占位
        // placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
        effect: "fadeIn", // 载入使用何种效果
        // effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
        threshold: 00, // 提前开始加载
        // threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
        //event: 'click',  // 事件触发时才加载
        // event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
        //container: $("#container"), // 对某容器中的图片实现效果
        // container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
        //  failurelimit: 10 // 图片排序混乱时
        // failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
    });



    //轮播图
    $(".line5").hover(function () {
        $(".btnbox").css("display", "block")
    }, function () {
        $(".btnbox").css("display", "none")
    })
    var imgIndex = 0;
    var dianIndex = 0;
    function autoPlay() {
        imgIndex++;
        if (imgIndex == 8) {
            imgIndex = 0;
        }
        $(".line5").find(".ul").find("li").eq(imgIndex).animate({ opacity: 1 }).siblings("li").css("opacity", "0")

        dianIndex++;
        if (dianIndex == 8) {
            dianIndex = 0;
        }
        $(".line5").find("ol").find("li").eq(dianIndex).addClass("current").siblings().removeClass("current")
    }
    var timer = setInterval(autoPlay, 3000)
    $(".line5").hover(function () {
        clearInterval(timer)
    }, function () {
        timer = setInterval(autoPlay, 3000)
    })
    $(".line5").find("ol").find("li").hover(function () {
        imgIndex = dianIndex = $(this).index() - 1
        autoPlay()
    })
    $(".line5").find(".btnbox").find(".btn-lt").on("click", function () {

        if (imgIndex < 0) {
            imgIndex = 7
        }
        if (dianIndex < 0) {
            dianIndex = 7
        }
        dianIndex = dianIndex - 2;
        imgIndex = imgIndex - 2;
        autoPlay()
    })
    $(".line5").find(".btnbox").find(".btn-lr").on("click", function () {
        autoPlay()
    })

    //顶部固定栏
    $(document).scroll(function () {
        if ($(document).scrollTop() > 800) {
            $(".float-top").css("display", "block")
        } else {
            $(".float-top").css("display", "none")
        }
    })

    //查看全部
    $(".body").find(".fr").find("a").hover(function () {
        $(this).css("color", "orange")
        $(this).find("em").css("background", "orange")
    }, function () {
        $(this).css("color", "#000000")
        $(this).find("em").css("background", "#b0b0b0")
    })

    //左右焦点图
    $(".line17").find(".left").on("click", function () {
        $(this).css("opacity", "0.5")
        $(this).siblings(".right").css("opacity", "1")
        $(this).parent().siblings("ul").animate({ left: -1000 })
    })

    $(".line17").find(".right").on("click", function () {
        $(this).css("opacity", "0.5")
        $(this).siblings(".left").css("opacity", "1")
        $(this).parent().siblings("ul").animate({ left: 0 })
    })

})